<script setup>
import { ref } from 'vue'
const list = ref([
  {
    name: '已沟通',
    value: 0
  },
  {
    name: '已投递',
    value: 0
  },
  {
    name: '收藏',
    value: 0
  }
])
const activeName = ref()
activeName.value = list.value[0].name

const handleClick = (TabPaneName) => {
  console.log(TabPaneName)
}
</script>

<template>
  <div class="job-tab">
    <el-tabs v-model="activeName" @tab-change="handleClick">
      <el-tab-pane v-for="item in list" :key="item.name" :name="item.name">
        <template #label>
          <span>{{ item.name }} {{ item.value }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="data-blank"></div>
</template>

<style lang="scss" scoped>
.job-tab {
  position: relative;
  padding: 0 24px;
  background: #fff;
  border-radius: 12px;
}
.data-blank {
  margin-top: 20px;
  border-radius: 12px;
  padding: 100px 0;
  text-align: center;
  min-height: 340px;
  position: relative;
  background: #fff;
}
</style>
